<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

<head>
    <meta name="generator" content="Hugo 0.138.0">
    <script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='description' content="欢迎👏！">
    <title>Ryan Yuan&#39;s Blog</title>

    <link rel='canonical' href='http://localhost:1313/'>

    <link rel="stylesheet" href="/scss/style.min.663803bebe609202d5b39d848f2d7c2dc8b598a2d879efa079fa88893d29c49c.css">
    <meta property='og:title' content="Ryan Yuan's Blog">
    <meta property='og:description' content="欢迎👏！">
    <meta property='og:url' content='http://localhost:1313/'>
    <meta property='og:site_name' content='Ryan Yuan&#39;s Blog'>
    <meta property='og:type' content='website'>
    <meta property='og:updated_time' content=' 2024-11-16T14:58:28&#43;08:00 ' />
    <meta name="twitter:title" content="Ryan Yuan's Blog">
    <meta name="twitter:description" content="欢迎👏！">
    <link rel="alternate" type="application/rss&#43;xml" href="http://localhost:1313/index.xml">
</head>

<body class="">
    <script>
        (function () {
            const colorSchemeKey = 'StackColorScheme';
            if (!localStorage.getItem(colorSchemeKey)) {
                localStorage.setItem(colorSchemeKey, "auto");
            }
        })();
    </script>
    <script>
        (function () {
            const colorSchemeKey = 'StackColorScheme';
            const colorSchemeItem = localStorage.getItem(colorSchemeKey);
            const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

            if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {


                document.documentElement.dataset.scheme = 'dark';
            } else {
                document.documentElement.dataset.scheme = 'light';
            }
        })();
    </script>
    <div class="container main-container flex on-phone--column extended">
        <aside class="sidebar left-sidebar sticky ">
            <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="切换菜单">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>

            <header>


                <figure class="site-avatar">
                    <a href="/">





                        <img src="/img/avatar_hu3914371031822380188.jpg" width="300" height="300" class="site-logo"
                            loading="lazy" alt="Avatar">


                    </a>

                    <span class="emoji">🧸</span>

                </figure>



                <div class="site-meta">
                    <h1 class="site-name"><a href="/">Ryan Yuan&#39;s Blog</a></h1>
                    <h2 class="site-description">欢迎👏！</h2>
                </div>
            </header>
            <ol class="menu-social">

                <li>
                    <a href='https://github.com/KkQ36' target="_blank" title="GitHub" rel="me">


                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path
                                d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
                        </svg>




                    </a>
                </li>

                <li>
                    <a href='https://twitter.com' target="_blank" title="Twitter" rel="me">


                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path
                                d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
                        </svg>




                    </a>
                </li>

            </ol>
            <ol class="menu" id="main-menu">



                <li class='current'>
                    <a href='/'>



                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <polyline points="5 12 3 12 12 3 21 12 19 12" />
                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                        </svg>




                        <span>主页</span>
                    </a>
                </li>


                <li>
                    <a href='/archives/'>



                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-archive" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <rect x="3" y="4" width="18" height="4" rx="2" />
                            <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
                            <line x1="10" y1="12" x2="14" y2="12" />
                        </svg>




                        <span>归档</span>
                    </a>
                </li>


                <li>
                    <a href='/search/'>



                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <circle cx="10" cy="10" r="7" />
                            <line x1="21" y1="21" x2="15" y2="15" />
                        </svg>




                        <span>搜索</span>
                    </a>
                </li>


                <li>
                    <a href='/%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5/'>



                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
                        </svg>




                        <span>友情链接</span>
                    </a>
                </li>

                <li class="menu-bottom-section">
                    <ol class="menu">


                        <li id="dark-mode-toggle">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left"
                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <circle cx="8" cy="12" r="2" />
                                <rect x="2" y="6" width="20" height="12" rx="6" />
                            </svg>



                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right"
                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" />
                                <circle cx="16" cy="12" r="2" />
                                <rect x="2" y="6" width="20" height="12" rx="6" />
                            </svg>



                            <span>暗色模式</span>
                        </li>

                    </ol>
                </li>
            </ol>
        </aside>

        <aside class="sidebar right-sidebar sticky">


            <form action="/search/" class="search-form widget">
                <p>
                    <label>搜索</label>
                    <input name="keyword" required placeholder="输入关键词..." />

                    <button title="搜索">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24"
                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <circle cx="10" cy="10" r="7" />
                            <line x1="21" y1="21" x2="15" y2="15" />
                        </svg>



                    </button>
                </p>
            </form>



            <section class="widget archives">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-infinity" width="24"
                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" />
                        <path
                            d="M9.828 9.172a4 4 0 1 0 0 5.656 a10 10 0 0 0 2.172 -2.828a10 10 0 0 1 2.172 -2.828 a4 4 0 1 1 0 5.656a10 10 0 0 1 -2.172 -2.828a10 10 0 0 0 -2.172 -2.828" />
                    </svg>



                </div>
                <h2 class="widget-title section-title">归档</h2>






                <div class="widget-archive--list">
                    <div class="archives-year">
                        <a href="/archives/#2024">

                            <span class="year">2024</span>
                            <span class="count">1</span>

                        </a>
                    </div>
                    <div class="archives-year">
                        <a href="/archives/#2020">

                            <span class="year">2020</span>
                            <span class="count">1</span>

                        </a>
                    </div>
                    <div class="archives-year">
                        <a href="/archives/#2019">

                            <span class="year">2019</span>
                            <span class="count">4</span>

                        </a>
                    </div>

                </div>
            </section>



            <section class="widget tagCloud">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24"
                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" />
                        <line x1="5" y1="9" x2="19" y2="9" />
                        <line x1="5" y1="15" x2="19" y2="15" />
                        <line x1="11" y1="4" x2="7" y2="20" />
                        <line x1="17" y1="4" x2="13" y2="20" />
                    </svg>



                </div>
                <h2 class="widget-title section-title">分类</h2>

                <div class="tagCloud-tags">

                    <a href="/categories/test/" class="font_size_3">
                        Test
                    </a>

                    <a href="/categories/syntax/" class="font_size_1">
                        Syntax
                    </a>

                    <a href="/categories/test-with-whitespaces/" class="font_size_1">
                        Test With Whitespaces
                    </a>

                    <a href="/categories/themes/" class="font_size_1">
                        Themes
                    </a>

                    <a href="/categories/%E6%B5%8B%E8%AF%95/" class="font_size_1">
                        测试
                    </a>

                </div>
            </section>




            <section class="widget tagCloud">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tag" width="24"
                        height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" />
                        <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
                        <circle cx="9" cy="9" r="2" />
                    </svg>



                </div>
                <h2 class="widget-title section-title">标签云</h2>

                <div class="tagCloud-tags">

                    <a href="/tags/markdown/" class="font_size_2">
                        Markdown
                    </a>

                    <a href="/tags/css/" class="font_size_1">
                        Css
                    </a>

                    <a href="/tags/emoji/" class="font_size_1">
                        Emoji
                    </a>

                    <a href="/tags/html/" class="font_size_1">
                        Html
                    </a>

                    <a href="/tags/tag-with-whitespaces/" class="font_size_1">
                        Tag With Whitespaces
                    </a>

                    <a href="/tags/text/" class="font_size_1">
                        Text
                    </a>

                    <a href="/tags/themes/" class="font_size_1">
                        Themes
                    </a>

                </div>
            </section>


        </aside>


        <main class="main full-width">





            <section class="article-list">


                <article class="">
                    <header class="article-header">

                        <div class="article-details">


                            <div class="article-title-wrapper">
                                <h2 class="article-title">
                                    <a href="/p/myfirstblog/">MyFirstBlog</a>
                                </h2>


                            </div>





                            <footer class="article-time">

                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
                                        <circle cx="18" cy="18" r="4" />
                                        <path d="M15 3v4" />
                                        <path d="M7 3v4" />
                                        <path d="M3 11h16" />
                                        <path d="M18 16.496v1.504l1 1" />
                                    </svg>
                                    <time class="article-time--published">Nov 16, 2024</time>
                                </div>



                            </footer>



                        </div>

                    </header>
                </article>


                <article class="has-image">
                    <header class="article-header">
                        <div class="article-image">
                            <a href="/p/test-chinese/">
                                <img src="/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash_hu4773291511026196957.jpg"
                                    srcset="/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash_hu4773291511026196957.jpg 800w, /p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash_hu4180424280031756831.jpg 1600w"
                                    width="800" height="600" loading="lazy" alt="Featured image of post Chinese Test" />

                            </a>
                        </div>


                        <div class="article-details">

                            <header class="article-category">

                                <a href="/categories/test/" style="background-color: #2a9d8f; color: #fff;">
                                    Test
                                </a>

                                <a href="/categories/%E6%B5%8B%E8%AF%95/">
                                    测试
                                </a>

                            </header>


                            <div class="article-title-wrapper">
                                <h2 class="article-title">
                                    <a href="/p/test-chinese/">Chinese Test</a>
                                </h2>


                                <h3 class="article-subtitle">
                                    这是一个副标题
                                </h3>

                            </div>





                            <footer class="article-time">

                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
                                        <circle cx="18" cy="18" r="4" />
                                        <path d="M15 3v4" />
                                        <path d="M7 3v4" />
                                        <path d="M3 11h16" />
                                        <path d="M18 16.496v1.504l1 1" />
                                    </svg>
                                    <time class="article-time--published">Sep 09, 2020</time>
                                </div>



                            </footer>



                        </div>

                    </header>
                </article>


                <article class="has-image">
                    <header class="article-header">
                        <div class="article-image">
                            <a href="/p/markdown-syntax-guide/">
                                <img src="/p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash_hu13459586684579990428.jpg"
                                    srcset="/p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash_hu13459586684579990428.jpg 800w, /p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash_hu3425483315149503896.jpg 1600w"
                                    width="800" height="534" loading="lazy"
                                    alt="Featured image of post Markdown Syntax Guide" />

                            </a>
                        </div>


                        <div class="article-details">

                            <header class="article-category">

                                <a href="/categories/themes/">
                                    Themes
                                </a>

                                <a href="/categories/syntax/">
                                    Syntax
                                </a>

                            </header>


                            <div class="article-title-wrapper">
                                <h2 class="article-title">
                                    <a href="/p/markdown-syntax-guide/">Markdown Syntax Guide</a>
                                </h2>


                                <h3 class="article-subtitle">
                                    Sample article showcasing basic Markdown syntax and formatting for HTML elements.
                                </h3>

                            </div>





                            <footer class="article-time">

                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" />
                                        <path
                                            d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
                                        <circle cx="18" cy="18" r="4" />
                                        <path d="M15 3v4" />
                                        <path d="M7 3v4" />
                                        <path d="M3 11h16" />
                                        <path d="M18 16.496v1.504l1 1" />
                                    </svg>
                                    <time class="article-time--published">Mar 11, 2019</time>
                                </div>



                            </footer>



                        </div>

                    </header>
                </article>

            </section>
            <nav class='pagination'>





                <span class='page-link current'>1</span>



                <a class='page-link' href='/page/2/'>2</a>


            </nav>

            <footer class="site-footer">
                <section class="copyright">
                    &copy;

                    2020 -

                    2024 Ryan_Yuan
                </section>

                <section class="powerby">
                    使用 <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> 构建 <br />
                    主题 <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener"
                            data-version="3.29.0">Stack</a></b> 由 <a href="https://jimmycai.com" target="_blank"
                        rel="noopener">Jimmy</a> 设计
                </section>
            </footer>

        </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.6/dist/vibrant.min.js"
        integrity="sha256-awcR2jno4kI5X0zL8ex0vi2z&#43;KMkF24hUW8WePSA9HM=" crossorigin="anonymous">
        </script>
    <script type="text/javascript" src="/ts/main.7fefeb8886f8630fd012c4adfc02a288bd5edc31d8c6cbbed02cc2ffb7775cab.js"
        defer></script>
    <script>
        (function () {
            const customFont = document.createElement('link');
            customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

            customFont.type = "text/css";
            customFont.rel = "stylesheet";

            document.head.appendChild(customFont);
        }());
    </script>

</body>

</html>